<template>
	<span class="demonstration">请输入一个code</span>
	<el-input v-model="dataValue" placeholder="Please input" @change="change" clearable />

	<el-table :data="tableData" border stripe show-overflow-tooltip highlight-current-row style="width: 100%"
		:row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }"
		:default-sort="{ prop: 'ADD_MARKET_CAP', order: 'descending' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column prop="TRADE_DATE" label="持股日期" sortable fixed
			:formatter="(row, column) => replaceDate(row[column.property])"></el-table-column>
		<el-table-column prop="SECURITY_CODE" label="code" fixed></el-table-column>
		<el-table-column prop="SECURITY_NAME" label="名称" fixed></el-table-column>
		<el-table-column prop="CLOSE_PRICE" label="当日收盘价" sortable></el-table-column>
		<el-table-column prop="CHANGE_RATE" label="当日涨跌幅" sortable
			:formatter="(row, column) => changeRatio(row[column.property] / 100)"></el-table-column>

		<el-table-column prop="HOLD_SHARES" label="股数" sortable
			:formatter="(row, column) => changeMoney(row[column.property])"
			:sort-method="(a, b) => sort(a.HOLD_SHARES, b.HOLD_SHARES)" />

		<el-table-column prop="HOLD_MARKET_CAP" label="市值" sortable
			:formatter="(row, column) => changeMoney(row[column.property])"
			:sort-method="(a, b) => sort(a.HOLD_MARKET_CAP, b.HOLD_MARKET_CAP)" />


		<el-table-column label="持股市值变化" header-align="center">
			<el-table-column prop="HOLD_MARKETCAP_CHG1" label="1日" sortable
				:formatter="(row, column) => changeMoney(row[column.property])"
				:sort-method="(a, b) => sort(a.HOLD_MARKETCAP_CHG1, b.HOLD_MARKETCAP_CHG1)" />


			<el-table-column prop="HOLD_MARKETCAP_CHG5" label="5日" sortable
				:formatter="(row, column) => changeMoney(row[column.property])"
				:sort-method="(a, b) => sort(a.HOLD_MARKETCAP_CHG1, b.HOLD_MARKETCAP_CHG1)" />


			<el-table-column prop="HOLD_MARKETCAP_CHG10" label="10日" sortable
				:formatter="(row, column) => changeMoney(row[column.property])"
				:sort-method="(a, b) => sort(a.HOLD_MARKETCAP_CHG1, b.HOLD_MARKETCAP_CHG1)" />

		</el-table-column>

	</el-table>
</template>

<script >

export default {
	// 北向资金持股个股明细
	//https://data.eastmoney.com/hsgtcg/StockHdStatistics/000100.html
	data() {
		return {
			dataValue: "",
			tableData: [],
		}
	},
	mounted() {
		this.data('600519').then(data => this.tableData = data.result.data);
	},
	methods: {
		replaceDate(value) {
			return dayjs(value).format('YYYY-MM-DD');
		},
		change(value) {
			this.data(value).then(data => this.tableData = data.result.data);
		},
		sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			return parseFloat(r1) - parseFloat(r2);
		},
		data(dataValue) {
			if (dataValue == undefined) {
				dataValue = "600519";
			}

			console.log(" data ", dataValue);

			const options = {
				method: 'GET',
				url: 'https://datacenter-web.eastmoney.com/api/data/v1/get',
				params: {
					sortColumns: 'TRADE_DATE',
					sortTypes: '-1',
					pageSize: '50',
					pageNumber: '1',
					reportName: 'RPT_MUTUAL_HOLDSTOCKNORTH_STA',
					columns: 'ALL',
					source: 'WEB',
					client: 'WEB',
					filter: '(SECURITY_CODE=\"' + dataValue + '\")(TRADE_DATE>=\'2023-10-01\')'
				}
			};

			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});


		},
		changeRatio(num) {
			return Number(num * 100).toFixed(2) + "%";
		},
		changeMoney(num) {
			return changeMoney(num);
		}

	}
}

</script>